<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>毕业设计管理系统原型 - Apple Style</title>
    <link rel="stylesheet" href="styles.css">
    <style>
    /* 申请表模态样式（轻量内联，原型用） */
    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:none;align-items:center;justify-content:center;z-index:1200}
    .modal-overlay.open{display:flex}
    .modal-box{width:640px;background:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.2);overflow:hidden;display:flex;flex-direction:column}
    .modal-header{padding:16px 20px;border-bottom:1px solid #eee;font-weight:700}
    .modal-body{padding:18px 20px;flex:1;overflow:auto}
    .modal-footer{padding:12px 20px;border-top:1px solid #eee;display:flex;justify-content:flex-end;gap:10px}
    .modal-file-area{border:1px dashed #ddd;padding:18px;border-radius:6px;text-align:left;background:#fafafa}
    </style>
</head>
<body>

<div class="app-container">
    <div class="sidebar">
        <h2 class="app-title">毕设管理系统</h2>
        <h2 class="nav-group-title">功能模块</h2>
        <ul class="nav-list">
            <li class="nav-item active" data-module="module1">1. 课题申报</li>
            <li class="nav-item" data-module="module2">2. 选题确认</li>
            <li class="nav-item" data-module="module3">3. 任务书发布</li>
            <li class="nav-item" data-module="module4">4. 开题答辩</li>
            <li class="nav-item" data-module="module5">5. 指导记录</li>
            <li class="nav-item" data-module="module6">6. 中期检查</li>
            <li class="nav-item" data-module="module7">7. 论文管理</li>
            <li class="nav-item" data-module="module8">8. 毕业答辩</li>
            <li class="nav-item" data-module="module9">9. 成绩管理</li>
            <li class="nav-item" data-module="module10">10. 归档管理</li>
        </ul>
    </div>

    <div class="header">
        <span id="module-title">1. 课题申报</span>
        <div class="user-info">
            <span>指导教师：穆海伦 (工号: T1001)</span>
            <div class="user-avatar">屠</div>
        </div>
    </div>

    <div class="content">

        <div id="module1" class="module-content active">
            <h1>课题申报管理</h1>

            <div class="card" style="display: flex; justify-content: space-between; align-items: center; padding: 25px;">
                <div>
                    <span style="font-size: 16px; color: var(--color-text-secondary);">申报窗口期截止：</span>
                    <strong style="font-size: 20px; color: var(--color-rejected);">2025-12-31</strong>
                    <span style="font-size: 14px; margin-left: 10px; color: var(--color-rejected);">(剩余 42 天)</span>
                </div>
                <div style="text-align: right;">
                    <span style="font-size: 16px; color: var(--color-text-secondary);">已申报数量（上限）：</span>
                    <strong style="font-size: 30px; color: var(--color-primary);">3</strong> 
                    <span style="font-size: 18px; color: var(--color-text-secondary);">/ 8</span>
                    <button class="btn btn-secondary" style="margin-left: 20px;" onclick="alert('提示：申报数量已达到上限，无法新增。');">数量上限提示</button>
                </div>
            </div>
            
            <!-- 原有静态的申请表提交已移除；改为点击 [新增题目] 弹出模态对话框 -->

            <div class="card">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                    <div>
                        <button class="btn btn-primary" onclick="openApplyModal()">
                            <span style="margin-right: 5px;">+</span> 新增题目
                        </button>
                        <button class="btn btn-secondary" onclick="alert('对选中题目进行批量删除')">批量删除</button>
                        <button class="btn btn-secondary" onclick="alert('打印课题申报表')">打印/导出</button>
                    </div>

                    <div style="display: flex; gap: 10px;">
                        <input type="text" placeholder="搜索题目名称" style="width: 200px;">
                        
                        <select style="width: 150px;">
                            <option>筛选: 全部状态</option>
                            <option>状态: 研究所审核通过</option>
                            <option>状态: 待研究所审核</option>
                            <option>状态: 已退回 (可二次申报)</option>
                        </select>
                        
                        <select style="width: 100px;">
                            <option>排序: 默认</option>
                            <option>排序: 按申报时间</option>
                            <option>排序: 按热度/选题人数</option>
                        </select>
                    </div>
                </div>

                <table class="apple-table">
                    <thead>
                        <tr>
                            <th style="width: 5%;"><input type="checkbox" onchange="alert('全选/全不选')"></th>
                            <th style="width: 35%;">课题名称</th>
                            <th style="width: 15%;">申报时间</th>
                            <th style="width: 15%;">状态</th>
                            <th style="width: 30%;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>基于深度学习的图像识别系统研究</td>
                            <td>2025-10-01</td>
                            <td><span class="status-pill status-success">已通过</span></td>
                            <td>
                                <button class="btn btn-secondary" onclick="alert('查看课题详情')">查看详情</button>
                                <button class="btn btn-secondary" disabled>修改 (已通过)</button>
                                <button class="btn btn-secondary" style="color: var(--color-rejected);" disabled>删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>分布式任务调度系统的设计与实现</td>
                            <td>2025-10-05</td>
                            <td><span class="status-pill status-pending">待审核</span></td>
                            <td>
                                <button class="btn btn-secondary">查看详情</button>
                                <button class="btn btn-primary">修改</button>
                                <button class="btn btn-secondary" style="color: var(--color-rejected);">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>智能家居安全网关的漏洞分析</td>
                            <td>2025-10-10</td>
                            <td><span class="status-pill status-rejected">已退回</span></td>
                            <td>
                                <button class="btn btn-secondary">查看详情</button>
                                <button class="btn btn-primary">重新修改/提交</button>
                                <button class="btn btn-secondary" style="color: var(--color-rejected);">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <div style="margin-top: 20px; text-align: center; color: var(--color-text-secondary);">
                    <span>共 3 条记录 | 第 1 / 1 页</span>
                    <button class="btn btn-secondary" disabled>上一页</button>
                    <button class="btn btn-secondary" disabled>下一页</button>
                </div>

                <div style="margin-top: 25px; text-align: right; border-top: 1px solid var(--color-border); padding-top: 20px;">
                    <button class="btn btn-primary btn-large" style="padding: 10px 30px;" onclick="alert('申报表已成功提交到教科办，提交后不可修改！')">
                        提交申报表到教科办
                    </button>
                </div>
            </div>
        </div>

        <div id="module2" class="module-content">
            <h1>选题确认与学生审核</h1>
            <div style="display: grid; grid-template-columns: 1fr 3fr; gap: 30px;">
                <div class="card" style="height: fit-content;">
                    <div class="card-header">选题流程进度</div>
                    <ul class="timeline">
                        <li class="timeline-item active">
                            <span class="timeline-item-dot"></span>
                            <strong>待指导教师确认</strong>
                            <p style="color: var(--color-text-secondary); margin-top: 5px;">学生已提交志愿，等待审核</p>
                        </li>
                        <li class="timeline-item">
                            <span class="timeline-item-dot"></span>
                            <span>待教科办锁定</span>
                        </li>
                        <li class="timeline-item">
                            <span class="timeline-item-dot"></span>
                            <span>已锁定 (配对成功)</span>
                        </li>
                    </ul>
                    <div class="card-header" style="margin-top: 20px;">指导人数上限</div>
                    <p style="font-size: 28px; font-weight: 700; color: var(--color-primary); margin: 5px 0 0;">3 / 8</p>
                    <p style="color: var(--color-text-secondary); margin: 0;">已锁定学生人数/上限</p>
                </div>

                <div>
                    <div class="card">
                        <div class="card-header" style="display: flex; justify-content: space-between;">
                            <span>待处理的选题申请 (<span style="color: var(--color-rejected); font-weight: 700;">2</span> 条)</span>
                            <input type="text" placeholder="搜索学生姓名/学号" style="width: 150px; margin-top: -5px;">
                        </div>
                        <table class="apple-table">
                            <thead>
                                <tr>
                                    <th>学生姓名</th>
                                    <th>学号</th>
                                    <th>申请课题</th>
                                    <th>申请时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>张三</td>
                                    <td>202101001</td>
                                    <td>基于深度学习的图像识别系统研究</td>
                                    <td>2025-12-15</td>
                                    <td>
                                        <button class="btn btn-primary">接收</button>
                                        <button class="btn btn-secondary" style="color: var(--color-rejected);">退回</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>李四</td>
                                    <td>202101002</td>
                                    <td>分布式任务调度系统的设计与实现</td>
                                    <td>2025-12-16</td>
                                    <td>
                                        <button class="btn btn-primary">接收</button>
                                        <button class="btn btn-secondary" style="color: var(--color-rejected);">退回</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="card">
                        <div class="card-header">已锁定学生列表 (3 名)</div>
                        <table class="apple-table">
                            <thead>
                                <tr>
                                    <th>学生姓名</th>
                                    <th>学号</th>
                                    <th>配对课题</th>
                                    <th>锁定时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td>王五</td><td>202101003</td><td>智能家居安全网关的漏洞分析</td><td>2025-12-10</td></tr>
                                <tr><td>赵六</td><td>202101004</td><td>XXX课题</td><td>2025-12-11</td></tr>
                                <tr><td>钱七</td><td>202101005</td><td>YYY课题</td><td>2025-12-12</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <div id="module3" class="module-content">
            <h1>3. 任务书发布</h1>
            <div class="card">
                <div class="card-header">任务书编辑区 (针对学生：张三)</div>
                <label>任务内容与要求</label>
                <textarea rows="8" placeholder="请填写具体的任务内容、目标和技术要求..."></textarea>
                <label style="margin-top: 15px;">进度编排</label>
                <input type="text" placeholder="填写时间节点和阶段目标">
                <div style="margin-top: 20px; text-align: right;">
                    <button class="btn btn-secondary">保存草稿</button>
                    <button class="btn btn-primary">提交教科办审核</button>
                </div>
            </div>
        </div>

        <div id="module4" class="module-content">
            <h1>4. 开题答辩</h1>
            <div class="card">
                <div class="card-header">开题报告审阅与答辩记录</div>
                <p><strong>学生：张三</strong> | 开题报告状态: <span class="status-pill status-success">已上传</span></p>
                <div style="display: flex; gap: 20px; margin-top: 15px;">
                    <div style="flex: 1;">
                        <div class="card-header">报告审阅区</div>
                        <p style="color: var(--color-text-secondary); text-align: center;">[PDF 文件预览占位符]</p>
                        <button class="btn btn-secondary" style="width: 100%; margin-right: 0;">下载报告</button>
                    </div>
                    <div style="flex: 2;">
                        <div class="card-header">指导教师审查意见</div>
                        <textarea rows="5" placeholder="请输入对开题报告的审查意见..."></textarea>
                        <div style="margin-top: 15px;">
                            <label>答辩记录填写</label>
                            <input type="text" placeholder="答辩日期、地点、评语等...">
                            <button class="btn btn-primary" style="margin-top: 15px;">提交答辩记录</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="module5" class="module-content">
            <h1>5. 指导记录管理</h1>

            <div style="display: grid; grid-template-columns: 1fr 3fr; gap: 30px;">
                <div class="card">
                    <div class="card-header">指导学生列表</div>
                    <ul class="nav-list" style="padding-right: 0;">
                        <li class="nav-item active" style="margin-right: 0; background-color: rgba(0, 122, 255, 0.1); color: var(--color-primary);">
                            张三 <span style="margin-left: auto; font-size: 12px;" class="status-pill status-success">已达标(8/8)</span>
                        </li>
                        <li class="nav-item" style="margin-right: 0;">
                            李四 <span style="margin-left: auto; font-size: 12px;" class="status-pill status-rejected">未达标(3/8)</span>
                        </li>
                        <li class="nav-item" style="margin-right: 0;">王五 <span style="margin-left: auto; font-size: 12px;">(0/8)</span></li>
                    </ul>
                    <p style="margin-top: 15px; text-align: center; color: var(--color-rejected);">最低要求：8 条记录</p>
                </div>

                <div>
                    <div class="card">
                        <div class="card-header">
                            对 [张三] 的指导记录
                            <span style="float: right; font-weight: 500; color: var(--color-text-secondary);">(提交截止: 2026-05-30)</span>
                        </div>
                        <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
                            <div>
                                <button class="btn btn-primary" onclick="alert('新增指导记录表单')">+ 新增记录</button>
                                <button class="btn btn-secondary">批量删除</button>
                            </div>
                            <div>
                                <button class="btn btn-secondary">导出记录表</button>
                                <button class="btn btn-primary">提交指导记录表到教科办</button>
                            </div>
                        </div>

                        <table class="apple-table">
                            <thead>
                                <tr>
                                    <th style="width: 15%;">指导日期</th>
                                    <th style="width: 45%;">指导内容概要</th>
                                    <th style="width: 15%;">教师评分</th>
                                    <th style="width: 10%;">签字状态</th>
                                    <th style="width: 15%;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2025-11-20</td>
                                    <td>讨论开题报告结构，强调创新点。</td>
                                    <td><span class="status-pill status-success">优 (5/5)</span></td>
                                    <td>已签字</td>
                                    <td><button class="btn btn-secondary">修改/查看</button></td>
                                </tr>
                                <tr>
                                    <td>2025-12-05</td>
                                    <td>检查实验环境搭建进度。</td>
                                    <td><span class="status-pill status-pending">良 (4/5)</span></td>
                                    <td>待学生确认</td>
                                    <td><button class="btn btn-secondary">修改/查看</button></td>
                                </tr>
                                <tr>
                                    <td>2026-01-10</td>
                                    <td><span style="color: var(--color-text-secondary);">...（省略更多记录）</span></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div id="module6" class="module-content">
            <h1>6. 中期检查</h1>
            <div class="card">
                <div class="card-header">中期检查任务</div>
                <p>中期检查时间：2026-03-20 | 地点：X楼Y室</p>
                <table class="apple-table">
                    <thead><tr><th>学生姓名</th><th>报告提交</th><th>我的审核状态</th><th>操作</th></tr></thead>
                    <tbody>
                        <tr><td>张三</td><td><span class="status-pill status-success">已提交</span></td><td><span class="status-pill status-pending">待填写检查表</span></td><td><button class="btn btn-primary">开始检查</button></td></tr>
                        <tr><td>李四</td><td><span class="status-pill status-success">已提交</span></td><td><span class="status-pill status-success">已完成</span></td><td><button class="btn btn-secondary">查看结果</button></td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div id="module7" class="module-content">
            <h1>7. 论文管理 (一审/盲审)</h1>
            <div class="card">
                <div class="card-header">我的指导学生论文 (一审)</div>
                <table class="apple-table">
                    <thead><tr><th>学生</th><th>当前版本</th><th>一审状态</th><th>操作</th></tr></thead>
                    <tbody>
                        <tr><td>张三</td><td>V1.1 (修改稿)</td><td><span class="status-pill status-pending">待审阅</span></td><td><button class="btn btn-primary">进入审阅</button></td></tr>
                    </tbody>
                </table>
            </div>
             <div class="card">
                <div class="card-header">分配给我的盲审任务 (二审)</div>
                <table class="apple-table">
                    <thead><tr><th>论文编号</th><th>专业</th><th>二审状态</th><th>操作</th></tr></thead>
                    <tbody>
                        <tr><td>[匿名] LN2021001</td><td>计算机科学</td><td><span class="status-pill status-pending">待评审</span></td><td><button class="btn btn-primary">开始评审</button></td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div id="module8" class="module-content">
            <h1>8. 毕业答辩</h1>
            <div class="card">
                <div class="card-header">答辩信息与资料审核</div>
                <p><strong>答辩日期：</strong>2026-05-20 | <strong>答辩组：</strong>第一小组</p>
                <table class="apple-table">
                    <thead><tr><th>学生</th><th>论文终稿</th><th>PPT</th><th>我的审核</th><th>操作</th></tr></thead>
                    <tbody>
                        <tr><td>张三</td><td><span class="status-pill status-success">已上传</span></td><td><span class="status-pill status-success">已上传</span></td><td><span class="status-pill status-pending">待审核</span></td><td><button class="btn btn-primary">审核资料</button></td></tr>
                    </tbody>
                </table>
            </div>
             <div class="card">
                <div class="card-header">答辩记录录入 (答辩组成员权限)</div>
                <button class="btn btn-secondary">上传答辩录音文件 (自动转文本)</button>
                <button class="btn btn-primary">手动录入记录</button>
            </div>
        </div>

        <div id="module9" class="module-content">
            <h1>9. 成绩管理</h1>
            <div class="card">
                <div class="card-header">指导学生成绩录入</div>
                <p>提交截止日期: 2026-06-15</p>
                <table class="apple-table">
                    <thead><tr><th>学生</th><th>平时指导成绩 (30%)</th><th>论文评审成绩 (40%)</th><th>答辩成绩 (30%)</th><th>总分</th><th>状态</th></tr></thead>
                    <tbody>
                        <tr>
                            <td>张三</td>
                            <td><input type="text" value="90" style="width: 50px;"></td>
                            <td><input type="text" value="85" style="width: 50px;"></td>
                            <td><input type="text" value="88" style="width: 50px;"></td>
                            <td><strong>87.9</strong></td>
                            <td><span class="status-pill status-pending">草稿</span></td>
                        </tr>
                    </tbody>
                </table>
                <div style="margin-top: 20px; text-align: right;">
                    <button class="btn btn-primary">提交最终成绩到教务处</button>
                </div>
            </div>
        </div>

        <div id="module10" class="module-content">
            <h1>10. 归档管理</h1>
            <div class="card">
                <div class="card-header">学生归档材料审核</div>
                <table class="apple-table">
                    <thead><tr><th>学生</th><th>论文终稿</th><th>开题报告</th><th>中期检查表</th><th>我的审核状态</th><th>操作</th></tr></thead>
                    <tbody>
                        <tr>
                            <td>张三</td>
                            <td><span class="status-pill status-success">已上传</span></td>
                            <td><span class="status-pill status-success">已上传</span></td>
                            <td><span class="status-pill status-success">已上传</span></td>
                            <td><span class="status-pill status-pending">待审核</span></td>
                            <td><button class="btn btn-primary">审核归档</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card">
                 <div class="card-header">教务处归档查询入口</div>
                 <p style="color: var(--color-text-secondary);">（此区域为教务处权限，可进行归档锁定和档案查询）</p>
                 <button class="btn btn-secondary">档案查询</button>
            </div>
        </div>

    </div>
</div>
</div>

<!-- 申请表提交 模态（隐藏） -->
<div id="apply-modal-overlay" class="modal-overlay" onclick="closeApplyModal()">
    <div id="apply-modal" class="modal-box" onclick="event.stopPropagation()">
        <div class="modal-header">申请表提交</div>
        <div class="modal-body">
            <div class="modal-file-area">
                <label style="display:block;margin-bottom:8px;font-weight:600;">上传申请表 (支持 PDF/Word)：</label>
                <input id="apply-file-input" type="file" accept=".pdf,.doc,.docx" style="width:100%;">
                <p style="margin-top:10px;color:var(--color-text-secondary);font-size:13px;">请上传填写完成后的申请表。上传后可选择提交、导出或打印。</p>
            </div>
        </div>
        <div class="modal-footer">
            <button id="apply-export-btn" class="btn btn-secondary">导出</button>
            <button id="apply-print-btn" class="btn btn-secondary">打印</button>
            <button id="apply-submit-btn" class="btn btn-primary">提交</button>
        </div>
    </div>
</div>

<script src="script.js"></script>
</body>
</html>